<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	body{ perspective:400px;}
	.box{ width:200px; margin:300px auto; position:relative; -webkit-transform-style:preserve-3d;-webkit-animation:abc 5s infinite linear;}
	.box div{ width:210px; height:210px; position:absolute; top:0; left:0;  overflow:hidden;}
	.box .t{ transform:rotateX(90deg) translateZ(105px);}
	.box .b{transform:rotateX(90deg) translateZ(-105px);}
	.box .l{transform:rotateY(90deg) translateZ(-105px);}
	.box .r{ transform:rotateY(90deg) translateZ(105px);}
	.box .bf{ transform:translateZ(105px);}
	.box .a{ transform:translateZ(-105px);}
	.box p{ width:70px; height:70px; float:left; margin:0; padding:0; border-radius:30%; /*-webkit-animation:sabc .5s infinite linear;*/}
	.d_a{background:rgba(206,9,255,.5);}
	.d_b{background:rgba(255,102,204,.5)}
	.d_c{ background:rgba(0,51,255,.5); }
	.d_d{ background:rgba(247,0,0,.5);}
	.d_e{background:rgba(0,0,255,.5);}
	.d_f{background:rgba(255,255,0,.5); }
	.d_g{background:rgba(91,244,160,.5); }
	.d_h{background:rgba(255,0,0,.5); }
	.d_i{background:rgba(202,69,252,.5); }
	.d_j{background:rgba(26,26,255,.5); }
	.d_k{background:rgba(153,0,204,.5); }
	.d_l{background:rgba(255,0,0,.5); }
	.d_m{background:rgba(153,0,204,.5); }
	.d_n{background:rgba(255,255,134,.5); }
	.d_o{background:rgba(241,228,141,.5); }
	.d_p{background:rgba(119,4,13,.5); }
	
	
	@-webkit-keyframes abc{
		0%{transform:rotateX(0deg) rotateY(0deg);}	
		50%{transform:rotateX(180deg) rotateY(180deg);}			
		100%{transform:rotateX(360deg) rotateY(360deg);}
	}
	@-webkit-keyframes sabc{
		0%{transform:rotate(0deg);}	
		50%{transform:rotate(-180deg);}			
		100%{transform:rotate(-360deg);}
	}
	
</style>

</head>

<body>
<div class="box">
	<div class="t">
    	<p class="d_a">
        </p>
        <p class="d_b">
        </p>
        <p class="d_c">
        </p>
        <p class="d_d">
        </p>
        <p class="d_e">
        </p>
        <p class="d_f">
        </p>
        <p class="d_g">
        </p>
        <p class="d_h">
        </p>
        <p class="d_i">
        </p>
    </div>
    <div class="b">
    	<p class="d_a">
        </p>
        <p class="d_b">
        </p>
        <p class="d_c">
        </p>
        <p class="d_d">
        </p>
        <p class="d_e">
        </p>
        <p class="d_f">
        </p>
        <p class="d_g">
        </p>
        <p class="d_h">
        </p>
        <p class="d_i">
        </p>
        <p class="d_j">
        </p>
        <p class="d_k">
        </p>
        <p class="d_l">
        </p>
        <p class="d_m">
        </p>
        <p class="d_n">
        </p>
        <p class="d_o">
        </p>
        <p class="d_p">
        </p>
    </div>
    <div class="l">
    	<p class="d_a">
        </p>
        <p class="d_b">
        </p>
        <p class="d_c">
        </p>
        <p class="d_d">
        </p>
        <p class="d_e">
        </p>
        <p class="d_f">
        </p>
        <p class="d_g">
        </p>
        <p class="d_h">
        </p>
        <p class="d_i">
        </p>
        <p class="d_j">
        </p>
        <p class="d_k">
        </p>
        <p class="d_l">
        </p>
        <p class="d_m">
        </p>
        <p class="d_n">
        </p>
        <p class="d_o">
        </p>
        <p class="d_p">
        </p>
    </div>
    <div class="r">
    	<p class="d_a">
        </p>
        <p class="d_b">
        </p>
        <p class="d_c">
        </p>
        <p class="d_d">
        </p>
        <p class="d_e">
        </p>
        <p class="d_f">
        </p>
        <p class="d_g">
        </p>
        <p class="d_h">
        </p>
        <p class="d_i">
        </p>
        <p class="d_j">
        </p>
        <p class="d_k">
        </p>
        <p class="d_l">
        </p>
        <p class="d_m">
        </p>
        <p class="d_n">
        </p>
        <p class="d_o">
        </p>
        <p class="d_p">
        </p>
    </div>
    <div class="a">
    	<p class="d_a">
        </p>
        <p class="d_b">
        </p>
        <p class="d_c">
        </p>
        <p class="d_d">
        </p>
        <p class="d_e">
        </p>
        <p class="d_f">
        </p>
        <p class="d_g">
        </p>
        <p class="d_h">
        </p>
        <p class="d_i">
        </p>
        <p class="d_j">
        </p>
        <p class="d_k">
        </p>
        <p class="d_l">
        </p>
        <p class="d_m">
        </p>
        <p class="d_n">
        </p>
        <p class="d_o">
        </p>
        <p class="d_p">
        </p>
    </div>
    <div class="bf">
    	<p class="d_a">
        </p>
        <p class="d_b">
        </p>
        <p class="d_c">
        </p>
        <p class="d_d">
        </p>
        <p class="d_e">
        </p>
        <p class="d_f">
        </p>
        <p class="d_g">
        </p>
        <p class="d_h">
        </p>
        <p class="d_i">
        </p>
        <p class="d_j">
        </p>
        <p class="d_k">
        </p>
        <p class="d_l">
        </p>
        <p class="d_m">
        </p>
        <p class="d_n">
        </p>
        <p class="d_o">
        </p>
        <p class="d_p">
        </p>
    </div>
</div>
</body>
</html>
